<template>
	<view class="profile-page">
		<!-- 用户信息部分 -->
		<view class="user-info">
			<view class="user-header">
				<image class="profile-picture" src="/static/avatar.png" />
				<view class="user-details">
					<text class="username">萌新付加加</text>
					<text class="membership-status">新晋会员</text>
				</view>
				<view class="user-actions">
					<button class="menu-button">⋮</button>
				</view>
			</view>
			<view class="id-section">
				<text class="id-text">身份</text>
				<image class="barcode" src="/static/barcode.png" />
			</view>
		</view>

		<!-- 我的钱包部分 -->
		<view class="wallet-section">
			<text class="wallet-title">我的钱包</text>
			<text class="wallet-info">点击可查看我的钱包收益情况</text>
			<button class="wallet-button">立即进入</button>
		</view>

		<!-- 我的服务部分 -->
		<view class="services-section">
			<text class="section-title">我的服务</text>
			<view class="service-items">
				<view class="service-item">
					<image class="service-icon" src="/static/icons/orders.png" />
					<text class="service-label">我的订单</text>
				</view>
				<view class="service-item">
					<image class="service-icon" src="/static/icons/followers.png" />
					<text class="service-label">我的粉丝</text>
				</view>
				<view class="service-item">
					<image class="service-icon" src="/static/icons/favorites.png" />
					<text class="service-label">我的关注</text>
				</view>
			</view>
		</view>

		<!-- 小助手部分 -->
		<view class="assistant-section">
			<text class="section-title">小助手</text>
			<view class="assistant-list">
				<view class="assistant-item" v-for="(item, index) in assistantItems" :key="index">
					<image :src="item.icon" class="assistant-icon" />
					<text class="assistant-label">{{ item.label }}</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assistantItems: [{
						label: '会员升级',
						icon: '/static/icons/upgrade.png'
					},
					{
						label: '会员订单',
						icon: '/static/icons/orders.png'
					},
					{
						label: '商家入驻',
						icon: '/static/icons/entry.png'
					},
					{
						label: '申请拓店',
						icon: '/static/icons/expand.png'
					},
					{
						label: '邀请好友',
						icon: '/static/icons/invite.png'
					},
					{
						label: '服务协议',
						icon: '/static/icons/agreement.png'
					},
					{
						label: '会员商城',
						icon: '/static/icons/store.png'
					}
				]
			};
		}
	};
</script>

<style scoped>
	.profile-page {
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.user-info {
		background-color: #f58d35;
		padding: 20rpx;
		border-radius: 15rpx;
		position: relative;
	}

	.user-header {
		display: flex;
		align-items: center;
	}

	.profile-picture {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.user-details {
		flex: 1;
	}

	.username {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.membership-status {
		font-size: 24rpx;
		color: #d9d9d9;
	}

	.user-actions {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.menu-button {
		background: transparent;
		border: none;
		color: #fff;
		font-size: 32rpx;
	}

	.id-section {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10rpx;
	}

	.id-text {
		color: #fff;
		margin-right: 5rpx;
	}

	.barcode {
		width: 100rpx;
		height: 30rpx;
	}

	.wallet-section {
		background-color: #003366;
		padding: 20rpx;
		border-radius: 15rpx;
		color: #fff;
		margin: 20rpx 0;
		text-align: center;
	}

	.wallet-button {
		background-color: #f58d35;
		border-radius: 10rpx;
		color: #fff;
		padding: 10rpx;
		margin-top: 10rpx;
	}

	.services-section,
	.assistant-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.service-items {
		display: flex;
		justify-content: space-between;
	}

	.service-item {
		text-align: center;
	}

	.service-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.assistant-list {
		display: flex;
		flex-direction: column;
	}

	.assistant-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ddd;
		padding: 15rpx 0;
	}

	.assistant-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}

	.assistant-label {
		flex: 1;
	}

	.arrow {
		color: #888;
	}
</style>